function Heroarticle() {
  return (
    <article className=" col-span-4 row-span-3 grid grid-cols-4  grid-rows-4">
      <div className=" p-6 text-balance h-fit m-5">
        <p className="text-lg font-bold select-none">
          对面那些树、那些石头,自己不是已经看过无数次了么。只好说,在看孔雀,有只白孔雀。
        </p>
      </div>
      <div className=" col-span-1 row-span-3 m-3 p-6">
        <p className="text-lg font-bold select-none">
          她一直看着它,看不见的时候就用手去摸,用手指去抚摸那光滑的珠链,心里想象着那些易碎花卉和星星的轮廓,
          抚摸那只神奇的孔雀丝绸般光滑的尾巴。
        </p>
      </div>
      <div className="col-start-1  col-span-2 row-start-4  p-6  text-center">
        <p className="text-lg font-bold select-none">
        哪有兜里揣着蜥蜴散步的?
        </p>
      </div>
      <div className="col-start-3 row-start-1  row-span-4 col-span-2 overflow-hidden
      border-2 border-black 
      ">
        <img
          src="/src/assets/kongque.jpg"
          alt="placeholder"
          width="100%"
          className="grayscale hover:grayscale-0 transition-colors duration-300"
        />
      </div>
    </article>
  );
}

export default Heroarticle;
